<template>
  <div class="">

<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"   style="margin-top: 20px;">
          <el-form-item label="班号" prop="username">
            <el-input
              v-model="queryParams.username"
              placeholder="请输入班号"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="是否毕业" prop="phone">
           <el-select v-model="value5" placeholder="请选择">  
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
          </el-form-item>
          <el-form-item label="班级名称" prop="status">
            <el-select
              v-model="value"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             
          </el-form-item>
        </el-form>









   
      <el-button type="primary" @click="dialogVisible = true" size="mini" style="margin-left:30px">新增</el-button>
      <el-button type="primary" @click="dialogVisible1 = true"  size="mini" style="margin-left:30px">导入</el-button>
      <el-button type="primary" size="mini" style="margin-left: 30px;   margin-top: 20px">删除</el-button>
         <el-button type="primary"  size="mini" style="margin-left: 30px; margin-top: 20px" >毕业</el-button>
 
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 95%; margin-left: 30px; margin-top:8px "
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="ShiftNo" label="班号"> </el-table-column>
      <el-table-column prop="WorkDate" label="班级名称"> </el-table-column>
      <el-table-column prop="SemesterDate" label="专业名称"> </el-table-column>
      <el-table-column prop="SemesterandDate" label="专业方向">
      </el-table-column>
      <el-table-column prop="grade" label="年级"> </el-table-column>
      <el-table-column prop="GradeName" label="班主任"> </el-table-column>

      <el-table-column prop="CampusName" label="校区名称"> </el-table-column>

      <el-table-column label="操作">
        <i class="el-icon-edit" style="margin-left: 50px"></i>
      </el-table-column>
    </el-table>

   

    <el-dialog title="导入" :visible.sync="dialogVisible1" width="50%">
      <el-row>
        <el-col :span="24">
          <el-button type="primary" style="margin-left: 200px"
            >开始导入</el-button
          >
          <el-button type="primary">摸板下载</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >返回</el-button
          >
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px">
        <el-col :span="24">
          <span>说明:</span>
        </el-col>
        <el-col :span="24" style="margin-top: 10px">
          <span
            >1.不选择覆盖原有数据时，只增加系统里没有的班级信息；系统里已有的班级信息，内容不变</span
          >
          <span
            >2.不选择覆盖原有数据时，只增加系统里没有的班级信息；系统里已有的班级信息，内容不变</span
          >
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px">
        <el-col :span="24">
          <span
            >选择覆盖原有数据时，只增加系统里没有的班级信息；系统里已有的班级信息:</span
          >
        </el-col>
        <el-col :span="24" style="margin-top: 10px">
          <span style="color: red"
            >3.所有信息均应认真核对,确保数据真实,准确,完整</span
          >
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog
      title="新增学年学期信息"
      :visible.sync="dialogVisible"
      width="50%"
      @close="resetForm('form1')"
    >
      <el-form :model="form1" :rules="rules" ref="form1" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="班号:" prop="banHao">
              <el-input v-model="form1.banHao" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级名称:" prop="banMing">
              <el-input v-model="form1.banMing" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="专业名称:" prop="zuanYe">
              <el-select v-model="form1.zuanYe" style="width: 200px">
                <option value="1">1</option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业方向名称:" prop="zuanYeming">
              <el-select v-model="form1.zuanYeming" style="width: 200px">
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="年级名称:" prop="nianJi">
              <el-select v-model="form1.nianJi" style="width: 200px">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属校区:" prop="xiaoQu">
              <el-select v-model="form1.xiaoQu" style="width: 200px">
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="班主任:" prop="banZhuren">
              <el-input
                v-model="form1.banZhuren"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教室:" prop="jiaoShi">
              <el-input v-model="form1.jiaoShi" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="副班主任:" prop="fuBan">
              <el-input v-model="form1.fuBan" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生活指导老师:" prop="shengZhi">
              <el-input
                v-model="form1.shengZhi"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- v-model="form1.EndDateOfWork" -->
          <!-- style="width: 200px" -->
          <el-col :span="12">
            <el-form-item label="建班年月:" prop="jianBan" >
              <el-date-picker
                :editable="false"
                v-model="form1.jianBan"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级性质:" prop="xingZhi">
              <el-select v-model="form1.xingZhi" style="width: 200px">
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学制:" prop="xueZhi">
              <el-input v-model="form1.xueZhi" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级人数:" prop="banRen">
              <el-input v-model="form1.banRen" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form1')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      //专业的下拉框
      options1: [
        {
          value1: "选项1",
          label1: "全部",
        },
        {
          value1: "选项2",
          label1: "电子与信息技术",
        },
        {
          value1: "选项3",
          label1: "导游服务",
        },
        {
          value1: "选项4",
          label1: "学前教育",
        },
      ],
      value1: "",

      input: "",
queryParams:{
    username:'',
    phone:'',
    status:'',


},


      //表单验证
      rules: {
        banHao: [
          { required: true, message: "请输入班号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        banMing: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        zuanYe: [
          { required: true, message: "请输入专业名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        zuanYeming: [
          { required: true, message: "请输入专业方向名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        nianJi: [
          { required: true, message: "请输入年级名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        xiaoQu: [
          { required: true, message: "请输入所属校区", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        banZhuren: [
          { required: true, message: "请输入班主任", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        jiaoShi: [
          { required: true, message: "请输入教室", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        fuBan: [
          { required: true, message: "请输入副班主任", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        shengZhi: [
          { required: true, message: "请输入生活指导老师", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        jianBan: [
          {
            type: Date,
            required: true,
            message: "请选择建班年月",
            trigger: "change",
          },
        ],
        xingZhi: [
          { required: true, message: "请选择班级性质", trigger: "change" },
        ],
        xueZhi: [
          { required: true, message: "请输入学制", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        banRen: [
          { required: true, message: "请输入班级人数", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      dialogVisible1: false,
      options: [
        {
          value: "选项1",
          label: "已毕业",
        },
        {
          value: "选项2",
          label: "未毕业",
        },
      ],

        options5: [
        {
          value: "选项1",
          label5: "是",
        },
        {
          value: "选项2",
          label5: "否",
        },
      ],
      form1: {
        banHao:"",
        xingZhi:"",
        banRen:"",
        xueZhi:"",
        jianBan: "",
        zaoshangke: "",
        wanshangke: "",
        xiajieke: "",
        shangjieke: "",
        lessonLength: "",
        DaysWeek: "",
        TermTitle: "",
        TheNumberOfWeeksOfTheSemester: "",
        GradeName: "",
        EndDateOfWork: "",
        AcademicName: "",
        WorkDate: "",
        SemesterDate: "",
        DateOfRegistration: "",
        SemesterandDate: "",
      },
      value: "",
      value5:"",
      checked: true,
      tableData: [
        {
          ShiftNo: 96,
          WorkDate: "电子中专",
          SemesterDate: "电子信息技术",
          SemesterandDate: "无方向",
          grade: "2022级",

          GradeName: "杜佳琪",
          CampusName: "北校区",
        },
        {
          ShiftNo: 97,
          WorkDate: "旅游班",
          SemesterDate: "导游服务",
          SemesterandDate: "无方向",
          grade: "2022级",
          GradeName: "周静",
          CampusName: "北校区",
        },
        {
          ShiftNo: 98,
          WorkDate: "学前教育",
          SemesterDate: "学前教育",
          SemesterandDate: "无方向",
          grade: "2022级",
          GradeName: "中职老师",
          CampusName: "北校区",
        },
        {
          ShiftNo: 99,
          WorkDate: "电子中专",
          SemesterDate: "电子信息技术",
          SemesterandDate: "无方向",
          grade: "2022级",
          GradeName: "中职老师",
          CampusName: "北校区",
        },
        {
          ShiftNo: 100,
          WorkDate: "电子中专",
          SemesterDate: "电子信息技术",
          SemesterandDate: "无方向",
          grade: "2022级",
          GradeName: "中职老师",
          CampusName: "北校区",
        },
      ],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    resetForm(form1){
      this.$refs[form1].resetFields();
    },
    submitForm(form1) {
      this.$refs[form1].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类

// .el-form-item {
//  margin-bottom: 5px;
// }

::deep .el-form-item  {
  margin-bottom: 12px !important;
}

.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  height: 50px;
}
.bg-purple-dark {
  // background: #99a9bf;
  height: 50px;
}

.grid-content bg-purple-dark button {
  width: 150px;
  height: 30px;
  background-color: darkgray;
  font-size: 15px;
}
</style>
